<template>
  <div class="contain">
    <div class="banner">
      <img v-lazy="bannerSrc" alt="">
    </div>
    <div class="introduction">
      <div class="items" v-for="item in introduce">
        <img v-lazy="item.src" alt="">
        <div>
          <div class="title">{{item.title}}</div>
          <div class="text">{{item.text}}</div>
        </div>
      </div>
    </div>
    <div class="composition">
      <div class="title">{{productTitle}}</div>
      <div class="com-box">
        <p class="text">{{productText}}</p>
        <div class="p-box">
          <div class="product-list" v-for="item in product">
            <img v-lazy="item.src" alt="">
            <p>{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="application">
      <div class="title">{{application}}</div>
      <ul class="app-contain">
        <li class="app-list" v-for="item in applicationList">
          <p class="img-box">
            <img v-lazy="item.src" alt="">
          </p>
          <p class="name">{{item.title}}</p>
          <div>{{item.text.split("*")[0]}}</div>
          <div>{{item.text.split("*")[1]}}</div>
          <div>{{item.text.split("*")[2]}}</div>
        </li>
      </ul>
    </div>
    <div class="program">
      <div class="title">{{program}}</div>
      <div class="list">
        <div class="program-list" v-for="item in programList" :style="{background:item.src}">
          <p class="name">{{item.title}}</p>
          <p>{{item.text.split("*")[0]}}</p>
          <p>{{item.text.split("*")[1]}}</p>
          <p>{{item.text.split("*")[2]}}</p>
          <p>{{item.text.split("*")[3]}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data () {
      return {
        bannerSrc: require('../assets/vcbanner.jpg'),
        introduce: [
          {
            title: "云平台",
            text: "支持NVIDIA、AMD、intel多种虚拟化方案，并提供计算、存储、网络等资源池管理",
            src: require('../assets/cloudplatform.png')
          },
          {
            title: "低延时传输管道",
            text: "通过对网络的自适应和低延时操作的深度优化，让云平台能够提供更高的桌面操作体验，并极大减轻网络的压力",
            src: require('../assets/transition.png')
          },
          {
            title: "多终端支持",
            text: "支持不同系统与不同的芯片厂商的终端，支持硬件解码协议",
            src: require('../assets/moreterminal.png')
          },
          {
            title: "行业定制",
            text: "可根据不同的行业进行云平台深度定制化",
            src: require('../assets/custommade.png')
          }
        ],
        productTitle: "产品组成",
        productText: "云教室包含三款产品：虚拟云桌面服务器、云终端、BridgeTek云桌面虚拟化平台。",
        product: [
          {
            src: require('../assets/cloudTerminal.png'),
            name: "云终端"
          },
          {
            src: require('../assets/platform.png'),
            name: "BridgeTek云桌面虚拟化平台"
          },
          {
            src: require('../assets/server.png'),
            name: "虚拟云桌面服务器"
          }
        ],
        application: "应用场景",
        applicationList: [
          {
            title: "校园云",
            src: require('../assets/schoolcloud.png'),
            text: "将计算、存储以及数据资源作为服务，通过网络提供给教师和学生，鼓励校园内的各种形式的创新"
          },
          {
            title: "远程教学/远程实验室",
            src: require('../assets/remote.png'),
            text: "便捷访问托管桌面*远程访问机房环境"
          },
          {
            title: "图书馆/阅览室",
            src: require('../assets/libiray.png'),
            text: "自动查询终端*锁定的工作环境*定时系统重置"
          },
          {
            title: "学校实验室/机房",
            src: require('../assets/laboratory.png'),
            text: "快速更新系统环境*高安全/易管理*用户数据永久保存"
          },
          {
            title: "绿色校园",
            src: require('../assets/greenschool.png'),
            text: "节能减排*绿色IT"
          },
          {
            title: "教师在不同教室间漫游",
            src: require('../assets/teacher.png'),
            text: "远程备课*在不同多媒体教室间漫游*永久工作环境"
          }
        ],
        program: "方案特点",
        programList: [
          {
            title: "极致桌面体验",
            text: "与PC一致的桌面体验*桌面安全连接，传输加密*操作稳定，3000亿次压力测试无卡顿*1080p高清页面操作流畅，低带宽占用",
            src: 'url(' + require('../assets/desktop.png') + ')'
          },
          {
            title: "部署快速",
            text: "模板派送，3分钟快速生成上百桌面*新员工入职，桌面资源随需分发",
            src: 'url(' + require('../assets/deploy.png') + ')'
          },
          {
            title: "管理简单",
            text: "1个web管理控制台*业务软件或系统升级时，一键更新，无需逐台处理*按需调节CPU核数、内存大小或磁盘空间",
            src: 'url(' + require('../assets/manage.png') + ')'
          },
          {
            title: "外设全兼容",
            text: "摄像头、快拍仪*支持端口和设备映射*快速定制特殊化外设接口",
            src: 'url(' + require('../assets/peripherals.png') + ')'
          }
        ]
      }
    }
  }
</script>
<style scoped>
  .contain {
    width: 85%;
    margin: 0 auto;
    color: #505050;
  }

  .banner img {
    width: 100%;
  }

  .items {
    width: 49%;
    height: 150px;
    margin: 10px 0;
    background: #f7f7f7;
    border-radius: 7px;
    box-shadow: 1px 1px 1px 1px #f4f4f4;
    display: -webkit-flex;
    display: flex;
    align-items: center;
  }

  .introduction {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  .items img {
    display: block;
    margin-left: 20px;
  }

  .title {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .composition, .application, .program {
    margin-top: 60px;
  }

  .composition .title, .application .title, .program .title {
    font-size: 36px;
  }

  .p-box {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .product-list {
    width: 18%;
    height: 200px;
    position: relative;
    margin: 50px 0;
  }

  .product-list img {
    display: block;
    margin: 0 auto;
  }

  .product-list > p {
    width: 100%;
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
    background: #fbdaa8;
    position: absolute;
    bottom: 0;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
  }

  .com-box {
    background: #f7f7f7;
    box-shadow: 1px 1px 1px 1px #f4f4f4;
  }

  p.text {
    padding-top: 15px;
  }

  .app-contain {
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .img-box {
    width: 130px;
    height: 100px;
    margin: 0 auto;
    margin-top: 80px;
  }

  .app-list {
    width: 200px;
    background: #f7f7f7;
    box-shadow: 1px 1px 1px 1px #f4f4f4;
    border-radius: 10px;
  }

  .app-list p, .app-list div {
    text-align: center;
  }

  .app-list div {
    margin-top: 10px;
    font-size: 16px;
  }

  .app-list img {
    display: block;
    margin: 0 auto;
  }

  p.name {
    margin-top: 50px;
    font-size: 20px;
  }

  .program-list {
    width: 49%;
    height: 400px;
    margin: 20px 0;
    background-size: cover !important;
  }

  .list {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .program-list .name {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .program-list p {
    margin-left: 55px;
    margin-bottom: 10px;
  }

  @media screen and (max-width: 1650px) {
    .product-list {
      width: 25%;
    }

    .app-list {
      width: 170px;
    }

    p.name {
      font-size: 16px;
    }

    .app-list div {
      font-size: 14px;
    }

    .program-list {
      height: 280px;
    }

    .program-list p {
      margin-left: 25px;
      margin-bottom: 5px;
    }
  }
</style>
